<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .item{
            width: 300px;
            margin:0 auto;
        }
        .item .album img{
            width: 100%;
            border-radius: 8px;
            cursor: pointer;
        }
        .item .info p{
            font-size: 15px;
            margin-top: 8px;

            /* 显示一行 在这里老师演示的时候出了问题，因为他是为了有个小手，所以给p标签套上了a标签 */
            /* 写这三行代码的时候，发现并没有生效，解决方法是给a标签设置width:100%和overflow:hidden */
            /* 出现这种情况的原因是，p元素默认宽度是auto，然后这里设置了不换行，导致有可能延伸出去 */
            /* 因为a标签设置成了行内块，还没设定宽度，但如果给外层a标签限制了宽度，就不会出现这个问题了 */
            /* white-space: nowrap; */
            overflow: hidden;
            text-overflow: ellipsis;
            /* 如果想固定保留某几行文字 */
            /* -webkit-box是flex布局前身，现在一般作为保留多行文字使用 */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .item .info .anchor{
            font-size: 13px;
            color: #888;
            margin-top: 5px;
            cursor: pointer;
        }
        .item .info .anchor::before{
            content: url(../images/widget-up.svg);
            /* 因为伪元素是行内元素，不能设置宽高，那么我们要设置成快内块 */
            display: inline-block;
            width: 16px;
            height: 16px;
            position: relative;
            top: 2px;
        }
    </style>
</head>
<body>

    <div class="item">
        <div class="album">
            <img src="https://i1.hdslb.com/bfs/archive/439f265bbf1de06d0340824d7d25aa3f6404dfb0.jpg@672w_378h_1c_!web-home-common-cover.webp" alt="">
        </div>
        <div class="info">
            <p>被灯泡糖卡住了怎么办！来一起看看我的粉丝都给我送了什奇奇怪怪的礼物！！</p>
            <div class="anchor">
                <span class="nickname">山沐与山</span>
                <span class="time">3-20</span>
            </div>
        </div>
    </div>

    <!-- <div style="background-color: red;width: 300px;">
        <span style=" white-space: nowrap; display: inline-block; 
        overflow: hidden; background-color: aqua; width: auto;
        text-overflow: ellipsis;">1233333333333333333333333333333333333333</span>
    </div>
    <div style="background-color: bisque;width: 300px;"><p>1233333333333333333333312333333333333333</p></div>
    <span style="background-color: bisque;display: inline-block;width: 100%;">112312312312333333333333333333333333</span> -->

</body>
</html>